<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { reqMenuList, reqAddOrUpdateMenu, reqRemoveMenu } from "@/api/acl/menu";
import { ElMessage } from "element-plus";
// menuList
let menuList = ref<any[]>([]);
// 控制el-dialog组件显示与隐藏的字段
let dialogShow = ref<boolean>(false);
// menuParams
let menuParams = reactive<any>({
  code: "",
  level: 0,
  name: "",
  pid: 0,
});
// el-form组件实例对象
let form = ref<any>();
// onMounted
onMounted(() => {
  getMenuList();
});
// 获取menuList的函数
const getMenuList = async () => {
  let res: any = await reqMenuList();
  if (res.code == 200) {
    menuList.value = res.data;
  }
};
// 添加添加菜单按钮的回调
const addMenu = (menu: any) => {
  // 重置menuParams
  Object.assign(menuParams, {
    id: 0,
    code: "",
    level: menu.level + 1,
    name: "",
    pid: menu.id,
  });
  dialogShow.value = true;
  nextTick(() => {
    form.value.clearValidate("name");
    form.value.clearValidate("code");
  });
};
// 点击修改菜单按钮的回调
const updateMenu = (row: any) => {
  Object.assign(menuParams, row);
  dialogShow.value = true;
  nextTick(() => {
    form.value.clearValidate("name");
    form.value.clearValidate("code");
  });
};
// 点击el-dialog的确定按钮的回调
const confirm = async () => {
  await form.value.validate();
  let res: any = await reqAddOrUpdateMenu(menuParams);
  if (res.code == 200) {
    dialogShow.value = false;
    ElMessage({
      type: "success",
      message: menuParams.id ? "修改成功" : "添加成功",
    });
    getMenuList();
  } else {
    ElMessage({
      type: "error",
      message: menuParams.id ? "修改失败" : "添加失败",
    });
  }
};
// 触发el-popconfirm的confirm的回调
const handleConfirm = async (menu: any) => {
  let res: any = await reqRemoveMenu(menu.id);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "删除菜单成功",
    });
    getMenuList();
  } else {
    ElMessage({
      type: "error",
      message: "系统数据,无法删除",
    });
  }
};
const validatorName = (rule: any, value: any, callback: any) => {
  if (value.trim().length >= 2) {
    callback();
  } else {
    callback("菜单名称必须大于等于两位");
  }
};
const validatorCode = (rule: any, value: any, callback: any) => {
  if (value.trim().length >= 1) {
    callback();
  } else {
    callback("权限不能为空");
  }
};
// 表单验证规则对象
const rules = {
  name: [{ required: true, trigger: "blur", validator: validatorName }],
  code: [{ required: true, trigger: "blur", validator: validatorCode }],
};
</script>

<template>
  <div>
    <el-table border :data="menuList" row-key="id">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-button
            type="primary"
            size="small"
            :disabled="row.level == 4 ? true : false"
            @click="addMenu(row)"
            >{{ row.level == 3 ? "添加功能" : "添加菜单" }}</el-button
          >
          <el-button
            type="primary"
            size="small"
            :disabled="row.level == 1 ? true : false"
            @click="updateMenu(row)"
            >编辑</el-button
          >
          <el-popconfirm
            :title="`您确定要删除${row.name}吗?`"
            width="250px"
            icon="Delete"
            @confirm="handleConfirm(row)"
          >
            <template #reference>
              <el-button
                type="primary"
                size="small"
                :disabled="row.level == 1 ? true : false"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogShow"
      :title="menuParams.id ? '修改菜单' : '添加菜单'"
    >
      <el-form :model="menuParams" :rules="rules" label-width="70px" ref="form">
        <el-form-item label="名称" prop="name">
          <el-input
            placeholder="请输入菜单名称"
            v-model="menuParams.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="code">
          <el-input
            placeholder="请输入菜单权限值"
            v-model="menuParams.code"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogShow = false">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
